<template>
    <view class="content">
        <view class="main">
            <van-nav-bar :title="scrolling? pageTitle : ''" left-arrow @click-left="onClickLeft"
                style="z-index:104; background-color: transparent;"> </van-nav-bar>
            <!--滚动内容区域-->
            <scroll-view class="scroll-content" @scrolltolower="scrolltolower" @scroll="scrollPage" scroll-y
                show-scrollbar="false">
                <!-- <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading> -->
                <view class="top_box">
                    <view class="titleDiv">
                        <view class="pageTitle"> {{ pageTitle }} </view>
                        <view class="titleTips">{{ titleTips }}</view>
                    </view>
                </view>
                <view class="scroll-card">
                    <view class="activityDetail">
                        <view class="actTitleBox">
                            <view class="actTitle">{{ activities.title }}</view>
                            <view class="actImg"> <img :src="activities.image" alt="" mode="widthFix"> </view>
                        </view >
                        <view class="mt12">
                            <view class="actDate">{{ actOtherInfo.activityStartDate }} - {{ actOtherInfo.activityEndDate }}</view>
                            <view class="days">共{{ actOtherInfo.activityDays }}天</view>
                        </view>
                        <!-- //活动地点 -->
                        <view class="activityAddress">
                            <view class="itemLeft">
                                <view class="actDate">{{activities.address}} </view>
                                <view class="days">{{activities.addressDetail}}</view>
                            </view>
                            <view class="itemRight" @tap="toMap(0)">
                                <view style="height: 17px; text-align: center; width: 100%;">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png"
                                        alt="" style="width: 16px; height: 16px;">
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 门票信息 -->
                    <view class="ticketInfo info_wrapper" v-if="activityTicket.ticketTypeName || activityTicket.isFree == 1 || activitySignup.isPay == 0">
                        <view class="content_title">门票信息</view>
                        <view class="infoContent">
                            <view class="infoContentLabel mb32">门票种类 <span>{{activityTicket.ticketTypeName}}</span>
                            </view>
                            <view class="infoContentLabel mb32">单价
                                <span v-if="activitySignup.isPay == 1">{{activityTicket.pricePoint}}积分</span>
                                <span v-if="activitySignup.isPay == 0">免费</span>
                            </view>
                            <view class="infoContentLabel mb32">数量 <span>{{activitySignup.buyNum}}</span></view>
                            <view class="infoContentLabel">联系电话： <span>{{actOtherInfo.phone}}</span></view>
                        </view>
                    </view>
                    <!-- 报名信息 -->
                    <view class="joinUserInfo">
                        <view class="content_title">报名信息</view>
                        <view class="joinUserInfo_content">
                            <!-- <van-field class="uni-input" label="报名人昵称" focus @change="changeNickName"
                                :value="actOtherInfo.nickName" :border="noBorder" hold-keyboard="true"
                                custom-style="color:#111111; font-size:26rpx;line-height:26rpx" disabled
                                input-align="right" /> -->
                            <label>报名人昵称</label>
                            <view>{{actOtherInfo.nickName}}</view>
                        </view>
                        <view class="activityAccessories_content">
                           <label>{{selectedActivityControl}}</label>
                           <view>{{selectActivityOption}}</view>
                        </view>
                    </view>
                    <!-- 报名商品信息 -->
                    <!-- <view class="activityAccessories">
                        <view class="content_title">选择的商品信息</view>
                        <view class="activityAccessories_content">
                           <label>{{}}</label>
                           <view>{{activityOption.value}}</view>
                        </view>
                    </view> -->
                    <!-- 订单信息 -->
                    <view class="orderInfo info_wrapper" v-if="activitySignup.isPay == 1 ">
                        <view class="content_title">订单信息</view>
                        <view class="infoContent">
                            <view class="infoContentLabel mb32">订单号 <span>45861441122111</span></view>
                            <view class="infoContentLabel mb32">活动总金额 <span>20积分</span></view>
                            <view class="infoContentLabel mb32">优惠金额 <span>￥0</span></view>
                            <view class="infoContentLabel mb32">应付金额 <span>20积分</span></view>
                            <view class="infoContentLabel">实付金额 <span>20积分</span></view>
                        </view>
                    </view>
                    <!-- 温馨提示 -->
                    <view class="warmReminder" v-if="actOtherInfo.prompt">
                        <view class="content_title">温馨提示</view>
                        <view class="warmReminder_content">
                            <rich-text :nodes="actOtherInfo.prompt"></rich-text>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <!-- 已报名 未参加时 -->
            <view class="btn-area" v-if="signupStatus===0">
                <button plain class="cancelBtn" @click="cancelRegist" >取消报名</button>
                <button plain class="checkBtn" open-type="share" @tap="shareMyFriends">分享给好友</button>
            </view>
            <!-- 已报名 已参加时 -->
            <view class="btn-area-over" v-if="signupStatus===1">
                <button plain class="picBtn" @tap="toSendJudge">晒图</button>
            </view>
        </view>
    </view>
</template>

<script>
import  {getSignupSuccessDataApi,cancelSignUpActivityApi} from '@/api/activity'
import Toast from '@/wxcomponents/vant/toast/toast'
import  { PAGE_TYPE } from '@/utils/constant'

export default {
    components: {

    },
    data () {
        return {
            pageTitle:'已报名',
            titleTips:'已报名成功，记得准时参加哦',
            scrolling: false, // 顶部区域吸顶效果
            scrollMT: '',
            listTop:0,
            activities:{
                title:'大美运城此时此刻丨人生大事 吃喝二字吃好喝好',
                startTime:'10月1日0:00',
                endTime:'11月30日23:55',
                activityDays:31,
                days:31,
                nickname:'Allen0526',
                address:'东郡·水岸华庭小区西门小广场',
                addressDetail:'运城市盐湖区河东东街5088号',
                latitude:32.336994,
                longitude:118.805096,
                warmReminder:'<p style="padding-bottom:10rpx;"> <a style="color:red">1.</a>社群活动由发起人自行发起，蔚来仅提供活动展示空 间，请大家仔细甄别活动的真实性、有效性、安全性。所有运动、户外等具有相关风险的活动请确认购买保险；</p> <p style="padding-bottom:10rpx;"><a style="color:red">2.</a>此活动报名后不可取消，报名积分不予退还；</p> <p><a style="color:red;width:20rpx">3.</a>若活动发起人取消活动，系统将通知你活动取消并退还积分。</p>'
            },
            activitySignup:{},
            actOtherInfo:{
                signupStatus:1,
                activityStartDate:'',
                activityEndDate:'',
                prompt:'<p style="padding-bottom:10rpx;"> <a style="color:red">1.</a>社群活动由发起人自行发起，蔚来仅提供活动展示空 间，请大家仔细甄别活动的真实性、有效性、安全性。所有运动、户外等具有相关风险的活动请确认购买保险；</p> <p style="padding-bottom:10rpx;"><a style="color:red">2.</a>此活动报名后不可取消，报名积分不予退还；</p> <p><a style="color:red;width:20rpx">3.</a>若活动发起人取消活动，系统将通知你活动取消并退还积分。</p>',
                activityDays:31,
                nickName:'Allen0526',
                phone:'15212345678',
                address:'运城市盐湖区河东东街5088号',
                latitude:32.336994,
                longitude:118.805096,
            },
            activityTicket: {
                id: 0,
                activitiesId: 0,
                ticketTypeName: "string",
                priceMoney: 0,
                pricePoint: 0,
                number: 0,
                sessionSettings: "string",
                count: 0,
                participantsNum: 0,
                isFree: 0,
                registrationDate: "2019-08-24T14:15:22.123Z",
                cancelRestriction: 0,
                createTime: "2019-08-24T14:15:22.123Z",
                updateTime: "2019-08-24T14:15:22.123Z",
                createUserId: 0,
                updateUserId: 0,
                isDel: 0
            },
            selectedActivityControl:null,
            selectActivityOption:null,
            activityDays:31,
            params:undefined, //路由传过来的
            signupStatus:0,  //0  已报名  1  已参加 2已取消
            activitiesId:undefined,
            signUpActId:25,
            pageType:undefined, //页面来源类型
            isCanceling: false, // 新增取消防抖状态
           
        }
    },
    onLoad (data) { 
        if(data&& data.params){
            this.params=JSON.parse(decodeURIComponent(data.params))
            console.log(this.params,this.params.signUpActId,'signUpActId')
            this.activitiesId = this.params.activitiesId
            this.signUpActId = this.params.signUpActId
            this.pageType = this.params.pageType
            if(this.params.pageSign='mine'){
                this.getNavBarTitle(this.params.actStatus)
                this.signupStatus = this.params.actStatus
            }else{
                
            }

            // const scene = decodeURIComponent(data.scene)
            // console.log(scene)
            // const sceneObj = new URLSearchParams(scene)
            // console.log(sceneObj)
            // const signUpActId = sceneObj.get('activityId')
            // console.log(signUpActId)
            // // const userId =  sceneObj.get('user_id') || null
            // this.signUpActId = signUpActId

            this.getSignupSuccessData(this.signUpActId)
        }
    },
    onReady () {
        this.onRefresherMethod()

    },

    methods: {
        refresherpulling () {
            if (!this.isrefresher) {
                this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
                this.onRefresherMethod()
            }
        },
        onRefresherMethod() {
            // if (!this.isrefresher) {
            //     this.loadingIsShow = true
            // }
            // this.loadingIsShow = false
            // // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            // this.time = setTimeout(e => {
            //     this.isrefresher = false
            // }, 300)

            // Promise.all([this.getProductListApi()]).then(() => {
            //     console.log('所有api加载完成')
            //     this.loadingIsShow = false
            //     // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            //     this.time = setTimeout(e => {
            //         this.isrefresher = false
            //     }, 300)
            // })
        },
        scrolltolower () {

        },

        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 60 && !this.scrolling) {
				this.scrolling = true
			} else if (e.detail.scrollTop <= 60 && this.scrolling) {
				this.scrolling = false
			}
            // this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
        },
        onClickLeft () {
            console.log(this.params.pageSign,this.pageType,'返回')
            if(this.params.pageSign == 'scan'){
                uni.switchTab({ url: '/pages/find/index' })
            }else{
                if(this.pageType== PAGE_TYPE.FIND){
                	uni.redirectTo({ url: '/pages/activityModule/activityDetail?params=' +
                        encodeURIComponent(JSON.stringify(this.params))
                    })
                }else if(this.pageType== PAGE_TYPE.MINE){
                    uni.redirectTo({ url: '/pages/activityModule/activitiesList?params=' +
                        encodeURIComponent(JSON.stringify(this.params))
                    })
                }
            }
        },
        // biaoti
        getNavBarTitle (status){
            if (status === 0) {
                this.pageTitle = '已报名'
                // this.signupStatus = 0
                this.titleTips = '已报名成功，记得准时参加哦'
            } else if (status === 1) {
                this.pageTitle = '已参加'
                // this.signupStatus = 1
                this.titleTips = '活动已签到'
            } else if (status === 2) {
                this.pageTitle = '已取消'
                // this.signupStatus = 2
                this.titleTips = '活动报名已取消，已支付费用将原路返回'
            }
            
        },
        // 取消报名
        cancelRegist(){
            if (this.isCanceling) {
                Toast('正在处理中，请勿重复点击')
                return
            }
            this.isCanceling = true

            cancelSignUpActivityApi(this.signUpActId).then(res=>{
                console.log(res)
                if(res.code===200){
                    Toast('活动报名已取消，已支付费用将原路返回')
                    this.signupStatus = 2  //已取消
                    this.pageTitle='已取消'
                    this.titleTips='活动报名已取消，已支付费用将原路返回'
                    this.getSignupSuccessData(this.signUpActId)
                }
            }).finally(() => {
                setTimeout(() => {
                    this.isCanceling = false
                }, 500) // 500毫秒防抖时间
            })
            // this.signupStatus=2  //已取消
            // this.pageTitle='已取消'
            // this.titleTips='活动报名已取消，已支付费用将原路返回'
        },
        // 分享
        onShareAppMessage() {
            return{
                title:'快来看看这场活动',
                path:`/pages/find/index?activitiesId=${this.activitiesId}`,
                imageUrl:this.activities.image,
                success: function (shareRes) {
                    console.log('分享成功', shareRes);
                    this.logShareAction();
                    Toast.success('分享成功');
                },
                fail: function (err) {
                    console.log(err);
                }
            }
        },
        // 分享
        shareMyFriends(){
            wx.showShareMenu({
                withShareTicket: true
            });
            this.onShareAppMessage()
        },

        toMap(){
            const params = {
              merchantLocation: {
                latitude: Number(this.actOtherInfo.latitude),
                longitude: Number(this.actOtherInfo.longitude)
              },
              userLocation:{
                latitude: Number(this.actOtherInfo.latitude),
                longitude: Number(this.actOtherInfo.longitude)
              }
            }
            uni.navigateTo({
                url:
                '/pages/shoppingCart/map?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
        },
        // 晒图、去评价
        toSendJudge(){
            const params={
                pageSymbol:'act',
                activitiesId:this.activitiesId,
                pageType:this.pageType,
                pageSign: 'scan'
            }
            uni.navigateTo({
                url:
                    '/pages/userJudges/oneJudge?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 获取活动信息  已报名
        getSignupSuccessData(id){
            getSignupSuccessDataApi(id).then(res=>{
                console.log(res)
                if(res.code===200){
                	this.activities=res.data.activities
                    // this.activityTicket = res.data.activityTicket
                    this.actOtherInfo.nickName = res.data?.nickName || '微信用户'
                    this.actOtherInfo.phone = res.data?.phone || null
                    this.actOtherInfo.activityDays = res.data.activityDays
                    this.actOtherInfo.prompt = res.data?.prompt || ''
                    this.actOtherInfo.activityStartDate = res.data.activityStartDate
                    this.actOtherInfo.activityEndDate = res.data.activityEndDate
                    this.actOtherInfo.signupStatus = res.data?.signupStatus || 0
                    this.signupStatus = res.data?.signupStatus || 0
                    this.activitySignup = res.data?.activitySignup || {}
                    this.activityTicket = res.data?.activityTicket || {}
                    this.getNavBarTitle(res.data.signupStatus)
                    this.selectActivityOption = res.data?.activityOption?.value || ''
                    this.selectedActivityControl = res.data?.activityControl?.typeName || ''
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
	z-index: -3;

}

.main {
    position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	background-color: #f9f9f9;

    .fixed_top {
        position: fixed;
        width: calc(100% - 96rpx);
        z-index: 104;  //与页面的navbar同级
        // top: 85rpx;
    }
    .scroll_box{
        position: absolute;
        top: 107px;
        z-index: 1;
    }
}


::v-deep .van-nav-bar {
    background-color: transparent !important;
    z-index: 100 !important;
}


::v-deep .van-nav-bar__arrow {
    color: #111111 !important;
}

::v-deep .van-icon {
    color: #111111 !important;
}


.scroll-content {
    flex: 1;
    height: 1rpx;
}


.backIcon {
    margin-top: 16rpx;
}

.scroll-card {
    padding: 0 48rpx 230rpx;
    margin-bottom: 230rpx;

}

.top_box{
    padding-left: 48rpx;
    padding-right: 48rpx;
    background: #f9f9f9;
}


// 名称+日期
.titleDiv{
    
    .pageTitle{
        // font-weight: bold;
        font-size: 52rpx;
        line-height: 52rpx;
        text-align: left;
        color: #111111;
    }
    .titleTips{
        // font-weight: bold;
        font-size:26rpx;
        text-align: left;
        color: #111111;
        line-height: 26rpx;
        margin-top: 42rpx;
        // margin-bottom: 40rpx;
    }

}

// 活动详情卡片
.activityDetail{
    margin-top: 60rpx;
    padding:42rpx 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;

    // 标题和图片
    .actTitleBox{
        display: flex;
        // align-items: center;
        
        .actTitle{
            // width: 76%;
            width: calc(100% - 196rpx);
            padding-right: 80rpx;
            font-size: 32rpx;
            color: #111111;
            font-weight: bolder;
        }
        .actImg{
            // width: 24%;
            width: 116rpx;
            height: 116rpx;
            display: flex;
            align-items: center;
            // justify-content: center;
            flex-direction: column;
            overflow: hidden;

            img{
                // width: 100%;
                // height: auto;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
        }
    }
    // 日期  地址
    .actDate{
        font-weight: bolder;
        font-size: 28rpx;
        text-align: left;
        color: #111111;
    }
    // 天数 门牌号
    .days{
        font-size: 28rpx;
        // line-height: 28rpx;
        color: #666666;
        margin-top: 22rpx;
    }
    // 活动地址
    .activityAddress {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 52rpx;
        .itemRight {
            width: 58px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

    }
}
// 底部内容的标题
.content_title{
    font-size: 38rpx;
    color: #111111;
    line-height: 38rpx;
}
// 门票信息
.ticketInfo{
    margin-top: 42rpx;
}
// 报名信息
.joinUserInfo{
    margin-top:76rpx;
    .joinUserInfo_content{
        margin-top: 52rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26rpx;
        text-align: left;
        color: #666666;
    }
    .activityAccessories_content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;
        font-size: 26rpx;
        text-align: left;
        color: #111111;
    }
}
// 活动配件选择
.activityAccessories {
    margin-top: 100rpx;


}
// 温馨提示
.warmReminder{
    margin-top: 76rpx;
    .warmReminder_content{
        margin-top: 44rpx;
        font-size: 28rpx;
        text-align: left;
        color: #111111;

    }
}
// 订单信息
.orderInfo{
    margin-top: 76rpx;
}
//信息
.info_wrapper{
    // margin-top: 55rpx;
    .infoContentTitle{
        font-size: 38rpx;
        text-align: left;
        color: #111111;
        line-height: 38rpx;
    }
    .infoContent{
        margin-top: 52rpx;
        // padding-bottom: 49rpx;
        .infoContentLabel{
            font-size: 26rpx;
            line-height: 26rpx;
            text-align: left;
            color: #111111;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span{
                font-size: 26rpx;
                text-align: left;
                // color: #111111;
                color: #666666;
                line-height: 26rpx;
            }
        }
    }
}
// 底部按钮

// 已报名未参加
.btn-area{
    padding-top:32rpx;
    padding-left:48rpx ;
    padding-right: 48rpx;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    // height: calc(144rpx + env(safe-area-inset-bottom));
    width: calc(100% - 96rpx);
    display: flex;
    z-index: 100;
    justify-content: space-between;
    background-color: #f9f9f9;
}

.cancelBtn{
    background-color: #D4D4D4;
    border-radius: 50rpx;
    font-size:28rpx;
    text-align: center;
    color: #111111;
    height: 86rpx;
    line-height: 86rpx;
    border: none;
    // border: 1px solid #D4D4D4 !important;
    // padding-left: 35px;
    // padding-right: 35px;
    width: 45%;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 50rpx;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;
    // padding-left: 35px;
    // padding-right: 35px;
    width: 45%;
}

// 已报名  已参加  晒图
.btn-area-over {
    padding-top: 32rpx;
    padding-left: 48rpx;
    padding-right: 48rpx;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    // height: calc(144rpx + env(safe-area-inset-bottom));
    width: calc(100% - 96rpx);
    z-index: 100;

    .picBtn {
        background-color: #FF6203;
        border: none;
        border-radius: 50rpx;
        font-size: 28rpx;
        text-align: center;
        color: #FFFFFF;
        height: 86rpx;
        line-height:86rpx;
        width: 100%;
    }
}

button{
    border: none;
}
button[plain]{
    border:none;
}

// 用户昵称
::v-deep .van-cell{
    padding: 0px !important;
    border-bottom: 1px solid #f9f9f9;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 26rpx;
    line-height: 26rpx;
}
// 用户昵称的label
::v-deep .van-field__label, .van-field__label--disabled{
    color: #666666;
    font-size: 26rpx;
}
.mb32{
    margin-bottom: 32rpx;
}
.mt12{
    margin-top: 12rpx;
}
</style>
